<%
vm = @pg.representative_server.vm
%>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 database-overview">
  <%
    if (tsdb_client = PostgresServer.victoria_metrics_client)
      query = Metrics::POSTGRES_METRICS[:disk_usage].series[0].query.gsub("$ubicloud_resource_id", @pg.ubid)
      disk_usage = begin
        tsdb_client.query_range(query:, start_ts: Time.now.to_i - 60 * 60, end_ts: Time.now.to_i)[0]
      rescue Excon::Error::Socket => e
        Clog.emit("Failed to fetch disk usage for #{@pg.ubid} from VictoriaMetrics") { Util.exception_to_hash(e) }
      end

      disk_usage_subtext = if disk_usage
        disk_usage_percentage = disk_usage["values"].last[1].to_f
        disk_usage_gib = disk_usage_percentage * @pg.representative_server.storage_size_gib / 100
        subtext = "#{disk_usage_gib.round(2)} GB is used (#{disk_usage_percentage.round(2)}%)"

        if disk_usage_percentage > 80
          subtext = "<span class='text-red-600'>#{subtext}</span>"
        end

        subtext
      end
    end

    ha_option = Option::POSTGRES_HA_OPTIONS[@pg.ha_type]
    
    location_details, provider = if vm.aws_instance
      [vm.aws_instance.az_id, "AWS"]
    else
      [@pg.location.ui_name, @pg.location.provider.capitalize]
    end

    [
      ["hero-cpu-chip", vm.display_size, "#{vm.vcpus} vCPU, #{vm.memory_gib} GB RAM"],
      ["hero-circle-stack", "#{@pg.representative_server.storage_size_gib} GB", disk_usage_subtext],
      ["hero-square-2-stack-modified", ha_option.description, ""],
      ["hero-map-pin", @pg.location.display_name, h("#{location_details} (#{provider})")],
      ["postgres-logo", "Version #{@pg.version}", ""],
    ].each do |icon, text, subtext_html|
  %>
  <%== part("components/icon_with_text", icon:, text:, subtext_html:) %>
  <%
    end
  %>
</div>

<% @enable_echarts = true %>

<div id="metrics-container" class="p-6" data-metrics-url="<%= path(@pg) %>">
  <div class="md:flex md:items-center md:justify-between pb-2 lg:pb-4">
    <div class="min-w-0 flex-1">
      <h3 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">Metrics Summary</h3>
    </div>
  </div>
  <% if @pg.display_state != "creating" %>
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 border-t-0">
      <% Metrics::POSTGRES_METRICS.slice(:cpu_usage, :disk_usage).each do |key, metric| %>
        <div class="p-4 bg-gray-50 rounded-lg border border-gray-100">
          <h4 class="text-sm font-medium text-gray-900 mb-2"><%= metric.name %></h4>
          <p class="text-xs text-gray-500 mt-2"><%= metric.description %></p>
          <div
            class="metric-chart h-64 w-full"
            id="<%= key %>-chart"
            data-metric-key="<%= key %>"
            data-metric-unit="<%= metric.unit %>"
          >
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <div class="flex flex-col items-center justify-center h-full">
      <h2 class="text-2xl font-semibold text-gray-900">No metrics available</h2>
      <p class="text-gray-500 mt-2">Metrics will be available once the database is running.</p>
    </div>
  <% end %>
</div>
